<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="海外数据平台 - 号码校验和生成工具" />
    <meta name="keywords" content="数据校验,号码生成,海外数据" />

    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="//111.92.242.177" />

    <!-- 预连接 -->
    <link rel="preconnect" href="//111.92.242.177" />

    <!-- 性能优化 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />

    <title>海外数据平台</title>

    <style>
      /* 关键CSS内联，减少首屏渲染时间 */
      /* 重置基础样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        overflow: hidden;
      }

      /* 首屏加载动画 */
      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        /* 立即显示，不需要动画 */
        opacity: 1;
      }

      .loading-container {
        text-align: center;
        color: white;
      }

      .loading-spinner-container {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto 30px;
      }

      .loading-ring {
        position: absolute;
        border: 3px solid transparent;
        border-top: 3px solid #ffffff;
        border-radius: 50%;
        animation: loadingSpin 1.2s linear infinite;
        will-change: transform;
        box-sizing: border-box;
      }

      .loading-ring:nth-child(1) {
        width: 80px;
        height: 80px;
        top: 0;
        left: 0;
        animation-delay: 0s;
      }

      .loading-ring:nth-child(2) {
        width: 60px;
        height: 60px;
        top: 10px;
        left: 10px;
        border-top-color: rgba(255, 255, 255, 0.8);
        animation-delay: 0.2s;
      }

      .loading-ring:nth-child(3) {
        width: 40px;
        height: 40px;
        top: 20px;
        left: 20px;
        border-top-color: rgba(255, 255, 255, 0.6);
        animation-delay: 0.4s;
      }

      .loading-text h2 {
        font-size: 28px;
        font-weight: 600;
        margin: 0 0 10px 0;
        animation: slideUp 0.8s ease-out 0.3s both;
        will-change: transform, opacity;
      }

      .loading-text p {
        font-size: 16px;
        margin: 0;
        opacity: 0.9;
        animation: slideUp 0.8s ease-out 0.5s both;
        will-change: transform, opacity;
      }

      @keyframes loadingSpin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* 淡出动画 */
      .loading-screen.fade-out {
        animation: fadeOut 0.3s ease-in-out forwards;
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          visibility: hidden;
        }
      }

      /* 隐藏加载动画 */
      .loading-screen.hidden {
        display: none;
      }
    </style>
    <script type="module" crossorigin src="/js/index-1Eg_K2SG.js"></script>
    <link rel="modulepreload" crossorigin href="/js/vendor-Ds6qb_OU.js">
    <link rel="modulepreload" crossorigin href="/js/elementPlus-BbkEKKVj.js">
    <link rel="modulepreload" crossorigin href="/js/utils-Df52Rf_y.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Tyb_CNKB.css">
  </head>
  <body>
    <!-- 首屏加载动画 - 立即显示 -->
    <div class="loading-screen" id="loadingScreen">
      <div class="loading-container">
        <div class="loading-spinner-container">
          <div class="loading-ring"></div>
          <div class="loading-ring"></div>
          <div class="loading-ring"></div>
        </div>
        <div class="loading-text">
          <h2>海外数据平台</h2>
          <p>正在加载中...</p>
        </div>
      </div>
    </div>

    <!-- Vue应用容器 -->
    <div id="app"></div>

    <script>
      // 控制首屏加载动画
      function hideLoadingScreen() {
        const loadingScreen = document.getElementById('loadingScreen')
        if (loadingScreen && !loadingScreen.classList.contains('hidden')) {
          loadingScreen.classList.add('fade-out')
          setTimeout(function () {
            loadingScreen.classList.add('hidden')
          }, 300)
        }
      }

      // 简单的Vue应用检测
      function checkVueAppMounted() {
        const app = document.querySelector('#app > *')
        if (app && app.children.length > 0) {
          const firstChild = app.children[0]
          if (firstChild.innerHTML.trim() !== '' || firstChild.children.length > 0) {
            hideLoadingScreen()
            return true
          }
        }
        return false
      }

      // 立即开始检查
      const checkInterval = setInterval(function () {
        if (checkVueAppMounted()) {
          clearInterval(checkInterval)
        }
      }, 50)

      // 最大等待时间
      setTimeout(function () {
        hideLoadingScreen()
        clearInterval(checkInterval)
      }, 60000)
    </script>

    <!-- Vue应用脚本 - 放在最后面 -->
  </body>
</html>
